← Back

DOM SUMMARY MEMO IN JAVASCRIPT

This is a short and simple summary note about the main DOM methods, properties, and events.

Use it as a quick revision sheet.

When working with the DOM, you usually do five main things:

  1. find elements
  2. read or change content
  3. work with CSS classes
  4. create or remove elements
  5. react to events

Diagram 1. Main DOM work

DOM work
|
|-- find elements
|-- change content
|-- change classes
|-- create/remove elements
`-- handle events

Explanation

If you remember these five groups, the whole DOM topic becomes easier.

1. Searching for DOM elements

element.querySelector(selector) finds the first element inside element that matches the CSS selector.

Example

const title = document.querySelector(".title");

This means:

element.querySelectorAll(selector) finds all matching elements inside element.

Example

const items = document.querySelectorAll(".list-item");

This means:

Diagram 2. querySelector() vs querySelectorAll()

querySelector()
|
v
first match only

querySelectorAll()
|
v
all matches

Memory rule

querySelector = one
querySelectorAll = many

2. DOM element properties

element.textContent contains only the text inside the element. It ignores HTML tags.

Example

const text = document.querySelector(".text");
console.log(text.textContent);

element.innerHTML contains the HTML content inside the element as a string.

Example

const box = document.querySelector(".box");
console.log(box.innerHTML);

element.style contains the inline styles of the element. You can change styles directly with JavaScript.

Example

const button = document.querySelector(".btn");

button.style.backgroundColor = "blue";
button.style.fontSize = "20px";

Diagram 3. Properties

textContent
|
v
text only

innerHTML
|
v
HTML inside element

style
|
v
inline styles of element

Use textContent for text, innerHTML for HTML content, and style for inline CSS changes.

3. CSS classes on DOM elements

The classList property gives useful methods for working with CSS classes.

Examples

link.classList.contains("active");
link.classList.add("active");
link.classList.remove("active");
link.classList.toggle("active");
link.classList.replace("old-class", "new-class");

Diagram 4. classList methods

contains() - check
add()      - add class
remove()   - remove class
toggle()   - switch class on/off
replace()  - swap one class for another

These methods are used all the time for active buttons, open menus, hidden blocks, and theme switching.

4. Creating and removing DOM elements

document.createElement(tagName) creates a new HTML element in memory.

Example

const item = document.createElement("li");
item.textContent = "New item";

Important: the element is created, but it is not yet on the page.

element.append(el) adds content or an element to the end of the children.

list.append(item);

element.prepend(el) adds content or an element to the beginning of the children.

list.prepend(item);

element.remove() removes the element from the DOM tree.

const text = document.querySelector(".text");
text.remove();

insertAdjacentHTML(position, string) adds HTML at a specific position relative to an element.

list.insertAdjacentHTML("beforeend", "<li>New item</li>");

Diagram 5. Create and insert flow

createElement()
|
v
new element in memory
|
v
append() / prepend()
|
v
element appears in DOM

Memory rule

create - prepare - insert

Diagram 6. append() vs prepend()

prepend()
|
v
add at beginning

append()
|
v
add at end

Diagram 7. insertAdjacentHTML() positions

beforebegin - before the element
afterbegin  - inside, at the start
beforeend   - inside, at the end
afterend    - after the element

This is very useful when you want to add HTML without rewriting everything.

5. Events

element.addEventListener(event, handler) adds an event listener to an element.

Example

button.addEventListener("click", handleClick);

This means: wait for "click", and when it happens, run handleClick.

element.removeEventListener(event, handler) removes an event listener from an element.

Example

button.removeEventListener("click", handleClick);

Important: you must use the same handler function.

Diagram 8. Event listener flow

addEventListener()
|
v
listener waits
|
v
event happens
|
v
handler runs

6. Common event types

keydown happens when a keyboard key is pressed.

document.addEventListener("keydown", event => {
  console.log(event.key);
});

submit happens when a form is submitted.

form.addEventListener("submit", event => {
  event.preventDefault();
});

change happens when the value of a form element changes. For text fields, it usually happens after losing focus.

input happens every time the user types or deletes in a text field.

focus happens when an element gets focus.

blur happens when an element loses focus.

Diagram 9. Main event meanings

keydown - key pressed
submit  - form submitted
change  - value changed
input   - text changed right now
focus   - element got focus
blur    - element lost focus

Memory rule for text fields

input = live typing
change = final change after focus loss

7. Short examples of important events

input

input.addEventListener("input", event => {
  console.log(event.target.value);
});

change

select.addEventListener("change", event => {
  console.log(event.target.value);
});

focus

input.addEventListener("focus", () => {
  console.log("Focused");
});

blur

input.addEventListener("blur", () => {
  console.log("Blurred");
});

8. Easy memory rules

Find one      - querySelector()
Find many     - querySelectorAll()

Read text     - textContent
Read HTML     - innerHTML
Change style  - style

Check class   - contains()
Add class     - add()
Remove class  - remove()
Switch class  - toggle()
Swap class    - replace()

Create        - createElement()
Add at end    - append()
Add at start  - prepend()
Delete        - remove()

Listen        - addEventListener()
Stop listen   - removeEventListener()

9. Final quick summary

Searching

Properties

Classes

Create/remove

Events

Diagram 10. Final map

DOM summary
|
|-- search
|-- properties
|-- classes
|-- create/remove
`-- events

Explanation

This is the full revision picture.

If you know these groups, you already have a strong base for DOM work in JavaScript.

← Back